<template>
	<div class="m_r">
		<header class="top_bar">
			<a onclick="window.history.go(-1)" class="icon_back"></a>
			<h3 class="cartname">找回密码</h3>
		</header>
		<main class="user_login_box" style="padding-bottom: 20px;height: auto;">
			<div class="login_logo_wrap">
				
			</div>
			<div class="login_dialog">
				<div class="_username position_rel">
					<img class="login_accout_icon" src="../assets/images/account_icon.png"/>
					<input type="text" placeholder="请输入手机号" class="user_input" v-model="account">
				</div>
				<div class="_username u_passwd position_rel">
					<img class="login_accout_icon" src="../assets/images/code_icon.png"/>
					<input type="text" placeholder="请输入验证码" class="user_input" v-model="code">
					<input type="button" id="btn" @click="getCode" value="获取验证码" class="get_code_btn">
				</div>
				<div class="_username u_passwd position_rel">
					<img class="login_accout_icon" src="../assets/images/password_icon.png"/>
					<input type="password" placeholder="请输入新登录密码" class="user_input" v-model="NewPass">
				</div>
				<div class="login_box">
					<a @click="retrievePassword()" class="btn_login">重置密码</a>
				</div>
			</div>
		</main>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui';
	export default {
		data() {
			return {
				account: '',
				code: '',
				NewPass: ''
			}
		},
		methods: {
			retrievePassword() {
				let _this = this;
				_this.$http.put('/base/resetPassByPhone', {
					CellPhone: _this.account,
					NewPass: _this.NewPass,
					code: _this.code,
				}, localStorage.Authorization, res => {
					console.log('重置密码res', res)
					if(res.code === 200) {
						Toast(res.data);
						setTimeout(function(){
							_this.$router.go(-1)
						}, 1500)

					} else {
						Toast(res.error);

					}
				})

			},
			getCode: function() {
				let _this = this
				if(_this.account==='') {
					Toast('请输入手机号！')
					return false
				}
				_this.$http.get('/base/SmsCode', {
					CellPhone: this.account,
				}, localStorage.Authorization, r => {
					var countdown = 60;

					function sendemail() {
						var obj = document.getElementById("btn");
						settime(obj);
					}

					function settime(obj) { //发送验证码倒计时
						if(countdown == 0) {
							obj.setAttribute('disabled', false);
							//obj.removeattr("disabled");
							obj.value = "获取验证码";
							countdown = 60;
							return;
						} else {
							obj.setAttribute('disabled', true);
							obj.value = "重新发送(" + countdown + ")";
							countdown--;
						}
						setTimeout(function() {
							settime(obj)
						}, 1000)
					}
					sendemail()
				})
			}
		}
	}
</script>
<style>
	/*@import '../assets/css/reg.css';*/
	@import '../assets/css/login.css';
	
</style>
<style>
	.get_code_btn {
		position: absolute;
		top: 10px;
		right: 20px;
		border: 1px solid red;
		border-radius: 4px;
		padding: 5px 8px;
		color: red;
	}
</style>